<template>
  <div class="review-card">
    <!-- 文本内容区域 -->
    <div class="text-wrapper">
      <div class="stars">
        <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
      </div>
      <p class="text-top">{{ textTop }}</p>
      <p class="text-bottom">{{ textBottom }}</p>
    </div>
    <!-- 头像（可替换为表情等）区域，接收传入的头像地址 -->
    <div class="avatar-circle">
      <img :src="avatarUrl" :alt="avatarAlt" class="avatar" @error="handleImageError">
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ReviewCard',
    props: {
      // 上方文本，如 "Trustworthy brand"
      textTop: {
        type: String,
        required: true
      },
      // 下方文本，如 "Reliable always."
      textBottom: {
        type: String,
        required: true
      },
      // 头像（或表情）图片地址
      avatarUrl: {
        type: String,
        required: true
      },
      // 头像 alt 文本
      avatarAlt: {
        type: String,
        default: 'avatar'
      }
    },
    methods: {
      // 处理头像加载失败，替换为默认占位
      handleImageError(e) {
        e.target.src = 'https://via.placeholder.com/80';
      }
    }
  }
</script>

<style scoped>

  .review-card {
    width: 320px; /* 卡片宽度，可按需调整 */
    background-color: #b9f6ca; /* 浅绿色背景上半部分 */
    border-radius: 12px; /* 整体圆角 */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow: hidden; /* 隐藏超出圆角的内容 */
    font-family: Arial, sans-serif;
  }

  .text-wrapper {
    width: 60%;
    padding: 16px;
  }

  .stars {
    text-align: right;
    color: #ffeb3b; /* 星星颜色 */
    font-size: 16px;
    margin-bottom: 8px;
  }

  .text-top,
  .text-bottom {
    margin: 0;
    font-size: 18px;
    line-height: 1.4;
    color: #000;
  }

  .avatar-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 8px solid #ffa726; /* 橙色边框 */
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto 16px auto 0;
    overflow: hidden;
    align-self: flex-end; /* 靠底部对齐 */
    /* 核心规则：限制最大宽高，不超过容器 */
    max-width: 100%;
    max-height: 100%;

    /* 保持图片比例，避免拉伸变形 */
    object-fit: contain; /* 优先完整显示图片，可能留空白 */
    /* 或使用 object-fit: cover; 填充容器（可能裁剪部分图片） */

    padding: 0;
  }

  .avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
  }
</style>
